<template>
	<view class="content">
		<view class="bac">
			<!-- <view class="title">
				<image src="../../static/images/s11.png" mode="widthFix"></image>
				<view class="addrss" @tap="addrss">
					<image src="../../static/images/s13.png" mode="widthFix"></image>
					<text>{{city}}</text>
					<image class="ima" src="../../static/images/s12.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="title"  @tap="addrss">
				<image src="../../static/images/s13.png" mode="widthFix"></image>
				<view class="addrss" >
					<view class="ade"> {{city}} <image src="../../static/images/a28.png" mode="widthFix"></image> </view>
				</view>
				<!-- <image class="ima" src="../../static/images/a15.png" mode="widthFix"></image> -->
			</view>
			<input class="search" @tap='$open("/pages/index/searchcomm/searchcomm")' type="text" value="" disabled="disabled"
			 placeholder="请输入搜索内容" />
			<swiper class="swiper" circular='true' :indicator-dots="indicatorDots" indicator-color="rgba(255, 255, 255, 1)"
			 indicator-active-color='rgba(139, 221, 142, 1)' :autoplay="autoplay">
				<swiper-item class="swiper_er" v-for="(item,index) in banner" :key='index'>
					<!-- <image :src="item.image" mode="widthFix" @tap="$open(item.url)"></image> -->
					<image :src="item.image" mode="" @tap="$open(item.url)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="classify">
			<view class="classify_tuzi" v-for="(item,index) in cassify" :key='index'>
				<view class="classify_tuzi_item">
					<image :src="item.image" mode="" @tap='classifys(item.id,item.pid)'></image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- vip -->
		<view style="height: 100%; height: 30upx;background-color: #f3f4f5;"></view>
		<view class="vip" v-if="vips == 0">
			<image class="ivpima" src="../../static/images/a16.png" mode="" @tap="vip"></image>
		</view>
		<view style="height: 100%; height: 30upx;background-color:  #f3f4f5;"></view>
		<view class="feature">
			<view class="feat">
				<image src="../../static/images/s18.png" mode="widthFix"></image>
				<text>地方特色</text>
			</view>
			<view class="more" @tap='$open("/pages/index/story/story")'>
				<text>更多</text>
				<image src="../../static/images/s19.png" mode="widthFix"></image>
			</view>
		</view>
		<scroll-view scroll-x="true" class="scroll-Y">
			<view id="demo1" class="scroll-view-item uni-bg-red" v-for="(item) in feat" :key='item.id'>
				<view class="imag">
					<image :src="item.goods_image" mode="widthFix" @tap='shopgou(item.id)'></image>
					<view class="dfts">
						<text class="x">{{item.title}}</text>
						<text class="f">{{item.title_f}}</text>
						<view class="" style="display: flex;">
							<text class="price">￥{{item.price}}</text>
							<text class="price_q">￥{{item.oldprice}}</text>
						</view>
						<view class="lms">
							<text>销量{{item.xl}}笔</text>
							<image src="../../static/images/s21.png" mode="widthFix" @tap='shopping(item.id)'></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view style="height: 100%; height: 30upx;background-color:  #f3f4f5;"></view>
		<view class="feature">
			<view class="feat">
				<image src="../../static/images/s18.png" mode="widthFix"></image>
				<text>时令果蔬</text>
			</view>
			<view class="more">
				<!-- <text>更多</text>
			<image src="../../static/images/s19.png" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- 时令果蔬 -->
		<view class="season">
			<view class="fruits" @tap='classify'>
				<text style="color: rgba(255, 136, 74, 1);position: absolute;left: 20%;margin-top: 20%;">{{seasonon.name}}</text>
				<image :src="seasonon.image" mode="widthFix"></image>
			</view>

			<view class="fruits" @tap='classif'>
				<text style="color: rgba(139, 221, 142, 1);position: absolute;left: 65%;margin-top: 20%;">{{seasontwo.name}}</text>
				<image :src="seasontwo.image" mode="widthFix"></image>
			</view>

		</view>
		<view style="height: 100%; height: 30upx;background-color:  #f3f4f5;"></view>
		<view class="feature">
			<view class="feat">
				<image src="../../static/images/s18.png" mode="widthFix"></image>
				<text>今日菜谱</text>
			</view>
			<view class="more">
				<!-- <text>更多</text>
			<image src="../../static/images/s19.png" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- 今日菜谱 -->
		<view class="tu" @tap='$open("/pages/index/menu/menu")' style="height: 300rpx;">
			<image :src="menus" mode="" class="jrcp"></image>
		</view>
		<view class="fel">
			<view class="wit" @tap="$open('/pages/index/menu/menuinfo/menuinfo?id='+item.id) " v-for="item in mens">
				<image :src="item.image" mode=''></image>
				<view class="webz">
					<text>{{item.name}}</text>
					<view class="xi">
						<!-- 	<image src="../../static/images/s25.png" mode="widthFix"></image>	
			<text>450</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="bao">
			<image src="../../static/images/s26.png" mode="widthFix"></image>
			<text>爆款商品</text>
			<image src="../../static/images/s26.png" mode="widthFix"></image>
		</view>

		<view class="zuix">
			<view class="imag" v-for="(item ,index) in host" :key='index'>
				<image :src="item.goods_image" mode="widthFix" @tap='zuix(item.id)'></image>
				<text class="x">{{item.title}}</text>
				<view class="f">{{item.title_f}}</view>
				<view class="jiage" style="display: flex;margin-top: 35rpx;">
					<text class="price">￥{{item.price}}</text>
					<text class="price_q">￥{{item.oldprice}}</text>
				</view>
				<view class="lms">
					<text>销量{{item.xl}}笔</text>
					<image src="../../static/images/s21.png" mode="widthFix" @tap='shopping(item.id)'></image>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:'',
				indicatorDots: true,
				autoplay: true,
				//banner
				banner: [],
				//cassify
				cassify: [],
				//vip
				vips: '',
				//地方特色
				feat: [],
				//时令0
				seasonon: {},
				//时令1
				seasontwo: {},
				//菜谱
				menus: '',
				//菜谱
				mens: [],
				// 爆款
				host: [],
				courrt: 1,
				bs: 1,
				goodsList:[]

			}
		},
		onLoad() {
		this.getadd()
			// this.searchadd()
		// if(!this.city){
		// 	// #ifdef APP-PLUS
		// 	uni.getLocation({
		// 		type: 'wgs84',
		// 		geocode: true,
		// 		altitude: true,
		// 		success: (res) => {
		// 			this.$store.commit('ADD_CITY',res.address.city)	
		// 		}
		// 	});
		// 	// #endif
		// }
			
		},
// computed:{
// 	citys(){
// 		return this.$store.state.add
// 	}

// },
		onShow() {
			//首页
			this.hosts()
			this.hot()
			this.city = uni.getStorageSync('city')
	
		// console.log(uni.getStorageSync('add')
		},
		
		onReachBottom() {
			if (this.bs) {
				this.$ajax(
					this.apiList.host, {
						page: ++this.courrt
					},
					'POST',
				).then(res => {
					this.host = this.host.concat(res.data)
					if (!res.data.length) {
						this.bs = 0;
						this.$sToast('无更多数据')
					};
				})
			}
		},

		methods: {
			// getadd(){
			// 	uni.request({
			// 		url:getApp().globalData.gain + '/ws/location/v1/ip?key=PFQBZ-HH735-IUPIE-QCNLU-MOZMT-G5BRP',
			// 		success: (res) => {
					
			// 			this.city = res.data.result.ad_info.city
			// 			// this.$store.commit('ADD_CITY',this.city)	
			// 			uni.setStorageSync('city',this.city )
			// 			console.log(res)
			// 		}
			// 	})
			// },
			
			
			getadd(){
				this.$ajax(
				this.apiList.getlocal,
				).then(res=>{
					this.city = res.data.result.ad_info.city
					uni.setStorageSync('city',this.city)
				})
			},
			
			
			
			
			// searchadd(){
			// 	//#ifdef MP-WEIXIN
			// 	uni.chooseLocation({
			// 	    success:  (res)=> {
			// 				this.city = res.name
				     
			// 	    }
			// 	});
			// 	// #endif
			// },
			 
	cartList() {
				this.$ajax(
					this.apiList.cartlist,
					'POST',
				).then(res => {
					if(res.zk===1){
						this.flag = true
					}
					this.goodsList = res.data
					//加载时获取徽标
					uni.setTabBarBadge({
						index: 3,
						text: `${this.goodsList.length}`
					})
				})
			},
			shopping(id) {
				this.$ajax(
					this.apiList.cart, {
						gid: id
					},
					'POST',
				).then(res => {
					// console.log(res)
					this.$sToast(res.msg)
						this.cartList()
					
				})
			},

			//分类
			classifys(id, pid) {
				if (!pid) {
					pid = id;
					id = 0;
				}
				uni.switchTab({
					url: '../classify/classify',
					success: (res) => {
						uni.setStorageSync('catid', id)
						uni.setStorageSync('pid', pid)
						uni.setStorageSync('abc', 123)
					}
				})
			},
			// 时令分类
			classify() {
				uni.switchTab({
					url: '../classify/classify',
					success: (res) => {
						uni.setStorageSync('catid', this.seasonon.id)
						uni.setStorageSync('pid', this.seasonon.pid)
						uni.setStorageSync('abc', 123)
					}
				})
			},
			classif() {
				uni.switchTab({
					url: '../classify/classify',
					success: (res) => {
						uni.setStorageSync('catid', this.seasontwo.id)
						uni.setStorageSync('pid', this.seasontwo.pid)
						uni.setStorageSync('abc', 123)
					}
				})
			},
			vip() {
				uni.navigateTo({
					url: './vip/vip'
				})
			},
			addrss() {
				// this.searchadd()
				// console.log(111)
				uni.navigateTo({
					url: 'addrss/addrss'
				})
			},
			//地方特色
			shopgou(id) {
				uni.navigateTo({
					url: '../details/details?id=' + id
				})
			},
			// 今日菜谱详情
			menuinfo() {
				uni.navigateTo({
					url: 'menu/menuinfo/menuinfo'
				})
			},
			//首页
			hosts() {
				this.$ajax(
					this.apiList.hosts,
					'POST',
				).then(res => {
					this.banner = res.data.banner
					this.cassify = res.data.cates
					this.vips = res.data.isvip
					//地方特色
					this.feat = res.data.ts
					//时令0
					this.seasonon = res.data.slgs[0]
					//时令1
					this.seasontwo = res.data.slgs[1]
					//菜谱
					this.menus = res.data.caipubanner
					//菜谱
					this.mens = res.data.caipu

				})
			},
			// 爆款
			hot() {
				this.$ajax(
					this.apiList.host, {
						page: this.courrt
					},
					'POST',

				).then(res => {
					this.host = res.data
				})
			},
			zuix(id) {
				uni.navigateTo({
					url: '../details/details?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// width: 100%;
		// height: 100%;
		box-sizing: border-box;
		background-color: #f3f4f5;
	}

	.bac {
		background-color: #13CA62;
		width: 100%;
		height: 470rpx;
		/* #ifdef APP-PLUS */
		padding: 40upx 30upx 20upx 30upx;
		/* #endif  */
		padding: 20upx 30upx 20upx 30upx;
		box-sizing: border-box;

		.title {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 38rpx;
			}

			.addrss {
				flex: 0 0 90%;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 90%;
				// justify-content: center;
				.ade{
						height: 100%;
						width: 90%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding-left: 10upx;
						color: #fff
				}
				image {
					width: 30upx;
					height: 40rpx;
					margin-left: 10upx;
				}
				text {
					display: inline-block;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 66upx;
					color: rgba(255, 255, 255, 1);
					opacity: 1;
					margin: 0 20upx;
				}

				.ima {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.search {
			width: 100%;
			height: 64rpx;
			background-color: rgba(245, 245, 245, 1) !important;
			border-radius: 32rpx;
			padding-left: 80rpx;
			box-sizing: border-box;
			background: url(../../static/images/s14.png) no-repeat;
			background-position: 33%;
			background-size: 6%;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			text-align: center;
		}

		.swiper {
			width: 100%;
			border-radius: 20upx;
			height: 320rpx;
			padding-bottom: 880rpx;
			background: none;

			.swiper_er {
				width: 100%;
				height: 320rpx;
				border-radius: 20upx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
				}
			}
		}
	}

	.classify {
		width: 100%;
		// margin-left: 2.5%;
		// box-sizing: border-box;
		position: relative;
		border-top: 20rpx solid #f3f4f5;
		top: 50rpx;
		padding: 4upx 10upx;
		// justify-content: space-between;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 20rpx;
		.classify_tuzi {
			width: 22%;
			text-align: center;
			margin-right: 19upx;
			.classify_tuzi_item{
			    height: 120rpx;
			    width: 120rpx;
			    margin-left: 10%;
			    border-radius: 35%;
			    overflow: hidden;
			    image {
			     // margin-top: 20rpx;
			     width: 100%;
			     height: 100%;
			    }
			   }
			   text {
			    margin: 0;
			    padding: 10rpx;
			    font-size: 26rpx;
			    font-family: PingFang SC;
			    // position: relative;
			    display: block;
			    // top: -10rpx;
			   }
			// image {
			// 	margin-top: 20rpx;
			// 	width: 100%;
			// 	height: 100rpx;
			// 	border-radius: 35%;
			// }

			// text {
			// 	margin: 0;
			// 	font-size: 26rpx;
			// 	font-family: PingFang SC;
			// 	position: relative;
			// 	top: -15rpx;
			// }
		}
	}

	.vip {
		width: 95%;
		// box-sizing: border-box;
		// padding: 30upx;
		margin-left: 2.5%;
		height: 90rpx;
		margin-top: 50rpx;

		.ivpima {
			width: 100%;
			height: 100%;
		}
	}

	.feature {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		// margin-top: 30upx;
		background: #fff;

		.feat {

			display: flex;
			align-items: center;

			image {
				width: 15upx;
				margin-right: 20upx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}
		}

		.more {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 200;
				margin-right: 12upx;
				color: rgba(139, 221, 142, 1);
			}

			image {
				width: 20upx;
			}
		}
	}

	.scroll-Y {
		width: 100%;
		box-sizing: border-box;
		padding: 30upx 30upx;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		background: #f3f4f5;

		.scroll-view-item {
			display: inline-block;
			margin-right: 17upx;
			background: #fff;

			.imag {
				width: 275upx;

				image {
					width: 100%;
				}

				.dfts {
					padding: 20rpx;
				}

				.x {
					display: block;
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 700;
				}

				.f {
					display: inline-block;
					width: 70%;
					font-size: 28rpx;
					overflow: hidden;
					color: #C0C0C0;
					text-overflow: ellipsis;
				}

				.price {
					display: block;
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(226, 104, 27, 1);
				}

				.price_q {
					display: block;
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					text-decoration: line-through;
					color: rgba(112, 112, 112, 1);
				}

				.lms {
					display: flex;
					justify-content: space-between;
					width: 100%;
					margin-top: 25rpx;

					text {
						font-size: 18upx;
						font-family: PingFang SC;
						font-weight: 400;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.scroll-view-item:last-child {
			margin-right: 0;
		}
	}

	.season {
		width: 100%;
		box-sizing: border-box;
		// padding: 30upx;
		display: flex;
		padding: 30rpx;
		background: #f3f4f5;
		justify-content: space-around;

		.fruits {
			background: #fff;
			margin: 10rpx;
			flex-direction: column;

			text {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: bold;
				z-index: 9999;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}

			image {
				width: 345rpx;
				height: 345rpx;
				// margin-left: 30upx;
			}
		}
	}

	.tu {
		width: 95%;
		height: 30px;
		// box-sizing: border-box;
		// padding: 20rpx;
		margin-left: 2.5%;
		margin-top: 44rpx;

		.jrcp {
			width: 100%;
			height: 100%;
		}
	}

	.fel {
		width: 100%;
		box-sizing: border-box;
		background-color: #f3f4f5;
		padding: 30upx;
		display: flex;

		.wit {
			width: 335upx;
			background-color: #fff;
			margin-right: 20upx;

			image {
				width: 345rpx;
				height: 345rpx;
			}

			.webz {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10upx 10upx;
				box-sizing: border-box;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}

				.xi {
					display: flex;
					flex-direction: column;

					image {
						width: 345rpx;
						height: 345rpx;
					}

					text {
						font-size: 20upx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
			}
		}

		.wit:last-child {
			margin-right: 0;
		}
	}

	.bao {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		background-color: #f3f4f5;

		image {
			width: 180upx;
			vertical-align: middle;
		}

		text {
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			margin: 0 30upx;

		}
	}

	.zuix {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30upx;
		width: 100%;
		box-sizing: border-box;
		background-color: #f3f4f5;
		padding-bottom: 100upx;

		.imag {
			width: 335upx;
			background-color: #fff;
			margin-bottom: 30upx;

			image {
				width: 100%;
			}

			.x {
				display: inline-block;
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 700;
				padding-left: 20upx;
				box-sizing: border-box;
			}

			.f {
				width: 70%;
				font-size: 24rpx;
				overflow: hidden;
				padding-left: 20upx;
				color: #C0C0C0;
				flex-wrap: nowrap;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.price {
				display: inline-block;
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(226, 104, 27, 1);
				padding-left: 20upx;
				box-sizing: border-box;
			}

			.price_q {
				display: inline-block;
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(112, 112, 112, 1);
				padding-left: 20upx;
				box-sizing: border-box;
			}

			.lms {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin-top: 35rpx;

				text {
					display: inline-block;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-bottom: 10upx;
					padding-left: 20upx;
				}

				image {
					width: 32upx;
					margin-right: 10upx;
				}
			}
		}
	}

	.kanu {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
	}
</style>
